<template>
  <div class="editpsdBox">
    <div class="loginHeader">
      <p><img src="@a/images/logo.png" alt=""></p>
    </div>
    <el-card class="editCard"  :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col :span="12" :offset="6">
          <!-- 验证码 -->
          <el-form class="editForm" :model="codeData" :rules="codeRules" ref="codeRef" v-if="nextPass">
            <h2>请输入您需要重置登录密码的账户联系人手机</h2>
            <el-form-item label="联系人手机号"  prop="phone">
              <el-input type="" v-model.trim="codeData.phone" placeholder="输入联系人手机号">
              </el-input>
            </el-form-item>
            <el-form-item label="填写验证码" prop="code">
              <el-input type="" v-model.trim="codeData.code" placeholder="填写验证码12">
                <i slot="suffix" v-show="codeShow" class="codeYz" @click="getCode">{{getCodeText}}</i>
                <i slot="suffix" v-show="!codeShow" class="codeYz">{{count}}s后重新发送</i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btnNext" :disabled="this.codeData.code === '' || this.codeData.phone === '' "  @click="nextPage" >下一步</el-button>
            </el-form-item>
          </el-form>
          <!-- 修改密码 -->
          <el-form class="editForm" :model="psdData" :rules="psdRules" ref="psdRef" v-else>
            <h2>请输入您登录的新密码</h2>
            <el-form-item label="设置登录密码"  prop="password">
              <el-input type="password" v-model.trim="psdData.password" placeholder="输入8位以上数字、字母组合">
              </el-input>
            </el-form-item>
            <el-form-item label="再次确认密码" prop="repeatpsd">
              <el-input type="password" v-model.trim="psdData.repeatpsd" placeholder="请再输一次">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btnNext" :disabled="this.psdData.password === '' || this.psdData.repeatpsd === '' "  @click="submitBtn" >提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  components: {},
  data () {
      var validatePass2 = (rule, value, callback) => {
          if (value === '') {
              callback(new Error('请再次输入密码'));
          } else if (value !== this.psdData.password) {
              callback(new Error('两次输入密码不一致!'));
          } else {
              callback();
          }
      };

    return {
      codeShow:true,
      timer:null,
      nextBtn:true,
      nextPass:true,
      getCodeText:'获取验证码',
      count:'',
      codeRules:{
        code:[
          { required: true, message: '请填写验证码', trigger: 'blur' },
        ],
        phone:[
          { required: true, message: '请输入联系人手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "手机号错误，请重新输入", trigger: "blur" },
        ],
      },
      psdRules:{
        repeatpsd:[
          {required: true, message: '请重新输入登录密码', trigger: 'blur' },
          {pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: "请输入8-20位由数字、字母组合的密码", trigger: "blur" },
          {validator: validatePass2, trigger: 'blur', required: true }

        ],
        password:[
          {required: true, message: '请输入登录密码', trigger: 'blur' },
          {pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: "请输入8-20位由数字、字母组合的密码", trigger: "blur" },
        ],
      },

      codeData:{
        code:'',
        phone:'',
      },
      psdData:{
        password:'',
        repeatpsd:'',
      }
    };
  },
  methods: {
    // 获取验证码
    getCode(){
      var Reg = /^1[3|4|5|7|8][0-9]{9}$/;
      if(Reg.test(this.codeData.phone)){
        const type='UPDATE_LOGIN_PASSWORD'
        const data=this.codeData

        this.$http.loginApi.getCode(type,data).then(res => {
          console.log(res);
          if(res.status == 201){
            const TIME_COUNT = res.data.interval;
            this.$message.success("验证码发送成功")
              if (!this.timer) {
                this.count = TIME_COUNT;
                this.codeShow = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                      this.count--;
                    } else {
                      this.getCodeText="重新获取验证码"
                      this.codeShow = true;
                      clearInterval(this.timer);
                      this.timer = null;
                    }
                }, 1000)
              }
          }
        })
        .catch(err => {
          if(err.status == 400){
            this.$message.error(err.data.err_msg)
          }
        })
      }else{
        this.$message.warning('请填写手机号')
      }
    },
    //点击进行下一步
    nextPage(){
      const data=this.codeData
      const type='UPDATE_LOGIN_PASSWORD'
      this.$refs.codeRef.validate((valid) => {
        if (valid) {
          this.$http.loginApi.verifyCode(type,data).then(res => {
            console.log(res);
            if(res.data){
              this.$message.success('验证码校验成功')
              this.nextPass=false
            }else{
              this.$message.error('验证码输入错误，请重新输入验证码')
            }
          }).catch(err => {
            if(err.status == 400){
              this.$message.error(err.data.err_msg)
            }
            
          })
        } else {
          this.$message.error('请正确填写信息')
          return false;
        }
      });
      
    },
    //提交密码
    submitBtn(){
      const data={}
      data.phone=this.codeData.phone
      data.password=this.psdData.password
      this.$refs.psdRef.validate((valid) => {
        if (valid) {
          this.$http.loginApi.editPsd(data).then(res => {
            console.log(res);
            if(res.status == 200){
              this.$confirm('密码修改成功，将跳转到登录页重新登陆', '提示', {
                confirmButtonText: '确定',
                type: 'warning'
              }).then(() => {
                this.$router.push('/login')
              })
            }
          }).catch(err => {

            this.$message.error(err.data.err_msg)
          })
        } else {
          this.$message.error('请正确填写信息')
          return false;
        }
      });
    },

  },
}

</script>

<style scoped>
.editpsdBox{
  height: 100%;
  background: #F9FAFB;
}
.loginHeader{
  height:64px;
  background: #181C27;
  padding: 16px 0 16px 60px;
  display: flex;
  align-items: flex-end;
}
.loginHeader p{
  width: 140px;
}
.loginHeader span{
  width: 190px;
  border-left: 1px solid #979797;
  margin-left: 9px;
  padding: 2px 0 2px 9px;
}
.editCard{
  width: 63.47%;
  margin: 64px auto 0 auto;
  background: #fff;
  padding-bottom: 5%;
}
.editCard h2{
  margin-top: 42px;
  margin-bottom: 40px;
  color: #181C27;
  font-size: 20px;
}
.btnNext{
  width: 100%;
  height: 48px;
  background: #2878FF;
  border-radius: 8px;
  margin-top: 50px;
}
.codeYz{
  cursor: pointer;
  color: #2878FF;
  padding-right: 5px;
}
.btnNext.is-disabled{
  background-color: #a0cfff;
}
</style>